<template>
  <div class="preview" @click.self="emits('close')">
    <div class="bg">
      <div class="content">
        <img :src="src" alt="" width="100%" height="100%" draggable="false" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue'
defineProps<{
  src: string
}>()

const emits = defineEmits(['close'])
</script>

<style scoped lang="scss">
.preview {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.7);
  .bg {
    // width: 357px;
    // height: 667px;

    background-image: url('/public/iphone_7_plus.png');
    background-size: 100% 100%;
    width: 414px;
    height: 880px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .content {
    width: 370px;
    height: 675px;
    background-color: #aaa;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>

<script lang="ts">
export default {
  name: 'MyPreview'
}
</script>
